<template>
	<el-tabs v-model="activeName">
		<el-tab-pane
			:label="`${$t('dxn.card_ables_list.basic_information')}`"
			name="0"
		></el-tab-pane>
		<el-tab-pane
			:label="`${$t('dxn.card_ables_list.settlement_details')}`"
			name="1"
		></el-tab-pane>
		<el-tab-pane
			:label="`${$t('dxn.card_ables_list.hand_data')}`"
			name="2"
		></el-tab-pane>
		<el-tab-pane label="聊天记录" name="3"></el-tab-pane>
		<template v-if="activeName === '0'">
			<div>
				<span>{{ $t('dxn.card_ables_list.basic_info') }}</span>
				<el-divider></el-divider>
				<BasicTable
					:activeIdx="value"
					:queryData="queryData"
					v-bind="$attrs"
					v-on="$listeners"
					ref="BasicTable"
				/>
			</div>
		</template>
		<template v-if="activeName === '1'">
			<div>
				<span>
					{{ $t('dxn.card_ables_list.settlement_details') }}
				</span>
				<el-divider></el-divider>
				<SettleTable
					:tableHeight="tableHeight"
					:activeIdx="value"
					:queryData="queryData"
					v-bind="$attrs"
					v-on="$listeners"
					ref="SettleTable"
				/>
			</div>
		</template>
		<template v-if="activeName === '2'">
			<div>
				<span>{{ $t('dxn.card_ables_list.hand_data') }}</span>
				<el-divider></el-divider>
				<HandDataTable
					:tableHeight="tableHeight"
					:activeIdx="value"
					:queryData="queryData"
					v-bind="$attrs"
					v-on="$listeners"
					ref="HandDataTable"
				/>
			</div>
		</template>
		<template v-if="activeName === '3'">
			<div>
				<span>聊天记录</span>
				<el-divider></el-divider>
				<ChatRecordTable
					:tableHeight="tableHeight"
					:activeIdx="value"
					:queryData="queryData"
					v-bind="$attrs"
					v-on="$listeners"
					ref="ChatRecordTable"
				/>
			</div>
		</template>
	</el-tabs>
</template>

<script>
import BasicTable from '../BasicTable'
import SettleTable from '../SettleTable'
import HandDataTable from '../HandDataTable'
import ChatRecordTable from '../ChatRecordTable'
export default {
	components: {
		BasicTable,
		SettleTable,
		HandDataTable,
		ChatRecordTable
	},
	props: {
		tableHeight: { type: [String, Number], default: 480 },
		value: {
			type: String,
			default: '0'
		},
		queryData: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			activeName: '0',
			baseLoading: false
		}
	},
	watch: {
		value: {
			handler(val) {
				this.activeName = val
			},
			immediate: true
		},
		activeName(val) {
			this.$emit('input', val)
		}
	},
	methods: {}
}
</script>

<style lang="scss" scoped>
.container {
	.title {
		display: block;
		margin-top: 20px;
	}
}
</style>
